<template>
	<view class="rules-container">
		<!-- 头部说明 -->
		<view class="rules-header">
			<view class="header-content">
				<text class="header-title">积分获取规则</text>
				<text class="header-desc">多种方式获得积分，兑换心仪商品</text>
			</view>
		</view>

		<!-- 积分获取方式 -->
		<view class="rules-section">
			<view class="section-title">
				<text class="title-text">积分获取途径</text>
			</view>

			<view class="rule-item">
				<view class="rule-icon register">
					<text class="icon-text">🎉</text>
				</view>
				<view class="rule-content">
					<text class="rule-title">注册积分</text>
					<text class="rule-desc">首次绑定小程序</text>
					<view class="rule-reward">
						<text class="reward-text">+ {{rules[1]}} 积分</text>
					</view>
				</view>
			</view>

			<view class="rule-item">
				<view class="rule-icon recommend">
					<text class="icon-text">👥</text>
				</view>
				<view class="rule-content">
					<text class="rule-title">推荐积分</text>
					<text class="rule-desc">推荐好友绑定小程序赠送分享人积分</text>
					<view class="rule-reward">
						<text class="reward-text">+ {{rules[2]}} 积分</text>
					</view>
				</view>
			</view>

			<view class="rule-item">
				<view class="rule-icon share">
					<text class="icon-text">📤</text>
				</view>
				<view class="rule-content">
					<text class="rule-title">分享积分</text>
					<text class="rule-desc">分享链接，他人复购同款</text>
					<view class="rule-reward">
						<text class="reward-text">+ {{rules[3]}} 积分/次</text>
						<text class="reward-limit">（上限200分/月）</text>
					</view>
				</view>
			</view>

			<view class="rule-item">
				<view class="rule-icon consume">
					<text class="icon-text">📦</text>
				</view>
				<view class="rule-content">
					<text class="rule-title">消费积分</text>
					<text class="rule-desc">收到货之后扫码领积分</text>
					<view class="rule-reward">
						<text class="reward-text">随机积分</text>
					</view>
				</view>
			</view>

			<view class="rule-item">
				<view class="rule-icon signin">
					<text class="icon-text">📅</text>
				</view>
				<view class="rule-content">
					<text class="rule-title">签到积分</text>
					<text class="rule-desc">每日签到获得积分</text>
					<view class="rule-reward">
						<text class="reward-text">+ {{rules[5]}} 积分/天</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 积分使用说明 -->
		<view class="rules-section">
			<view class="section-title">
				<text class="title-text">积分使用说明</text>
			</view>

			<view class="usage-list">
				<view class="usage-item">
					<view class="usage-icon">✅</view>
					<text class="usage-text">积分可用于兑换商品和优惠券</text>
				</view>
				<view class="usage-item">
					<view class="usage-icon">✅</view>
					<text class="usage-text">积分有效期为1年，请及时使用</text>
				</view>
				<view class="usage-item">
					<view class="usage-icon">✅</view>
					<text class="usage-text">部分商品支持积分+积分卡组合兑换</text>
				</view>
				<view class="usage-item">
					<view class="usage-icon">✅</view>
					<text class="usage-text">积分不可转让，仅限本人使用</text>
				</view>
			</view>
		</view>

		<!-- 积分卡获取说明 -->
		<view class="rules-section">
			<view class="section-title">
				<text class="title-text">积分卡获取方式</text>
			</view>

			<view class="card-get-info">
				<view class="card-get-item">
					<view class="card-get-icon">🛒</view>
					<view class="card-get-content">
						<text class="card-get-title">仅通过购物获得</text>
						<text class="card-get-desc">积分卡只能通过购买商品后获得，其他方式无法获取</text>
					</view>
				</view>
				<view class="card-get-item">
					<view class="card-get-icon">📦</view>
					<view class="card-get-content">
						<text class="card-get-title">收货扫码领取</text>
						<text class="card-get-desc">确认收货后扫码，随机获得不同等级的积分卡（盲盒集卡）</text>
					</view>
				</view>
				<view class="card-get-item">
					<view class="card-get-icon">🎲</view>
					<view class="card-get-content">
						<text class="card-get-title">随机盲盒机制</text>
						<text class="card-get-desc">每次购物都有机会开出稀有卡片，等级越高越稀有</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 积分卡等级说明 -->
		<view class="rules-section">
			<view class="section-title">
				<text class="title-text">积分卡等级说明</text>
			</view>

			<view class="cards-info">
				<view class="card-level-item">
					<view class="card-badge s-level">S</view>
					<text class="card-name">S级积分卡</text>
					<text class="card-desc">最稀有，价值最高</text>
				</view>
				<view class="card-level-item">
					<view class="card-badge a-level">A</view>
					<text class="card-name">A级积分卡</text>
					<text class="card-desc">高级卡片，较为珍贵</text>
				</view>
				<view class="card-level-item">
					<view class="card-badge b-level">B</view>
					<text class="card-name">B级积分卡</text>
					<text class="card-desc">中高级卡片</text>
				</view>
				<view class="card-level-item">
					<view class="card-badge c-level">C</view>
					<text class="card-name">C级积分卡</text>
					<text class="card-desc">中级卡片，比较常见</text>
				</view>
				<view class="card-level-item">
					<view class="card-badge d-level">D</view>
					<text class="card-name">D级积分卡</text>
					<text class="card-desc">基础卡片，相对容易获得</text>
				</view>
			</view>
		</view>

		<!-- 温馨提示 -->
		<view class="tips-section">
			<view class="tips-title">
				<text class="tips-text">温馨提示</text>
			</view>
			<view class="tips-content">
				<text class="tips-item">• 积分和积分卡获取以实际到账为准</text>
				<text class="tips-item">• 分享积分每月上限200分，超出部分不再奖励</text>
				<text class="tips-item">• 积分卡仅通过购物获得，其他方式无法获取</text>
				<text class="tips-item">• 积分卡为盲盒形式，随机获得不同等级</text>
				<text class="tips-item">• 如有疑问请联系客服咨询</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					1: 0,
					2: 0,
					3: 0,
					4: 0,
					5: 0
				}
			}
		},
		onLoad(options) {
			this.loadDataRules()
		},
		methods: {
			// 加载规则信息
			loadDataRules() {
				this.$api.point.GetPointsTask().then(res => {
					// 任务类型：1-注册积分 2-推荐积分 3-分享积分 4-消费积分 5-签到积分
					res.data.forEach(item => {
						this.rules[item.task_type] = item.task_points
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rules-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 160rpx;
	}

	/* 头部 */
	.rules-header {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		padding: 60rpx 30rpx 40rpx;
		color: white;
	}

	.header-content {
		text-align: center;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 12rpx;
	}

	.header-desc {
		font-size: 26rpx;
		opacity: 0.9;
	}

	/* 规则区块 */
	.rules-section {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.section-title {
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	/* 规则项目 */
	.rule-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.rule-item:last-child {
		margin-bottom: 0;
	}

	.rule-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.rule-icon.register {
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
	}

	.rule-icon.recommend {
		background: linear-gradient(135deg, #52a58a, #6bb6a3);
	}

	.rule-icon.share {
		background: linear-gradient(135deg, #3498db, #5dade2);
	}

	.rule-icon.consume {
		background: linear-gradient(135deg, #9b59b6, #bb6bd9);
	}

	.rule-icon.signin {
		background: linear-gradient(135deg, #f39c12, #f1c40f);
	}

	.icon-text {
		font-size: 36rpx;
	}

	.rule-content {
		flex: 1;
	}

	.rule-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.rule-desc {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 12rpx;
		display: block;
	}

	.rule-reward {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.reward-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #52a58a;
		margin-right: 12rpx;
	}

	.reward-limit,
	.reward-bonus {
		font-size: 22rpx;
		color: #999;
	}

	/* 使用说明 */
	.usage-list {
		display: flex;
		flex-direction: column;
	}

	.usage-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.usage-item:last-child {
		margin-bottom: 0;
	}

	.usage-icon {
		width: 40rpx;
		height: 40rpx;
		background-color: #52a58a;
		color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		font-size: 20rpx;
		flex-shrink: 0;
	}

	.usage-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.5;
	}

	/* 积分卡获取信息 */
	.card-get-info {
		display: flex;
		flex-direction: column;
	}

	.card-get-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
	}

	.card-get-item:last-child {
		margin-bottom: 0;
	}

	.card-get-icon {
		width: 60rpx;
		height: 60rpx;
		background-color: #52a58a;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.card-get-content {
		flex: 1;
	}

	.card-get-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.card-get-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 积分卡信息 */
	.cards-info {
		display: flex;
		flex-direction: column;
	}

	.card-level-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 16rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
	}

	.card-level-item:last-child {
		margin-bottom: 0;
	}

	.card-badge {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: white;
		flex-shrink: 0;
	}

	.card-badge.s-level {
		background-color: #ff6b35;
	}

	.card-badge.a-level {
		background-color: #52a58a;
	}

	.card-badge.b-level {
		background-color: #3498db;
	}

	.card-badge.c-level {
		background-color: #9b59b6;
	}

	.card-badge.d-level {
		background-color: #95a5a6;
	}

	.card-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 16rpx;
		min-width: 140rpx;
	}

	.card-desc {
		font-size: 24rpx;
		color: #666;
		flex: 1;
	}

	/* 温馨提示 */
	.tips-section {
		background-color: #fff9e6;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		padding: 30rpx;
		border: 1rpx solid #ffeaa7;
	}

	.tips-title {
		margin-bottom: 20rpx;
	}

	.tips-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #d63031;
	}

	.tips-content {
		display: flex;
		flex-direction: column;
	}

	.tips-item {
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 8rpx;
	}

	.tips-item:last-child {
		margin-bottom: 0;
	}
</style>